import styles from '../DeptList/deptList.module.less'
import { Form, Input, Button, Table, message, Popconfirm } from 'antd'
import { getDeptListAPI, deleteDeptAPI } from '../../api/deptListApi'
import { useEffect, useState, useRef } from 'react'
import type { TableColumnsType } from 'antd'
import { TypeDeptListAPI } from '../../type/api'
import CreateDept from './createDept'
function DeptList() {
  //存储部门列表的数据
  const [deptList, setDeptList] = useState<TypeDeptListAPI[]>([])
  //获取部门列表的API方法
  useEffect(() => {
    getDeptListFn()
  }, [])
  
  //获取部门列表的API方法
  async function getDeptListFn() {
    const res = await getDeptListAPI()

    setDeptList(res)
  }
  //新增部门的方法----针对个别部门的添加
  function addDeptListItem(type: string, data: string) {
    //调用子组件的方法-打开弹窗
    //传的是父级部门的parentId
    refValue.current?.showModal('create', data)
    //调用子组件的方法-给子组件的表单赋值
  }
  //编辑部门的方法----针对个别部门的修改
  // 传的是整个部门的数据// record.parentId, record.deptName, record.userName
  function editDeptListItem(type: string, data: TypeDeptListAPI) {
    //调用子组件的方法-打开弹窗
    // record.parentId, record.deptName, record.userName
    refValue.current?.showModal('edit', data)
  }
  //删除部门的方法
  async function delDeptListItem(id: string) {
    await deleteDeptAPI(id)
    message.success('删除成功')
  }

  // 确认删除气泡框
  const confirm = (id: string) => {
    delDeptListItem(id)
    message.success('删除成功')
  }
  // 取消删除气泡框
  const cancel = () => {
    message.error('取消删除')
  }

  //给Table传入列数据信息
  const columns: TableColumnsType<TypeDeptListAPI> = [
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
      width: '10%'
    },
    {
      title: '负责人',
      dataIndex: 'userName',
      key: 'userName',
      width: '10%'
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: '30%'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '30%'
    },

    {
      title: '操作',
      key: 'action',
      width: '20%',
      render: (_, record) => (
        <div>
          <Button
            onClick={() => {
              addDeptListItem('create', record.parentId)
            }}
          >
            新增
          </Button>
          <Button
            onClick={() => {
              editDeptListItem('edit', record)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title='温馨提示'
            description='确定删除该部门吗?'
            onConfirm={() => confirm(record.parentId)}
            onCancel={cancel}
            okText='Yes'
            cancelText='No'
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  ]
  //给Table传入数据源
  const data: TypeDeptListAPI[] = deptList
  // 获取表单实例
  const [form] = Form.useForm()
  // 搜索列表API
  async function searchList() {
    await getDeptListAPI({ name: form.getFieldValue('deptName') })
    console.log(form.getFieldValue('deptName'))
  }
  // 重置搜索条件并刷新列表
  function resetList() {
    form.resetFields(['deptName'])
    getDeptListFn()
  }
  // 创建添加的部门弹窗
  function addDeptList() {
    refValue.current?.showModal('create')
  }
  //存储子组件的实例
  const refValue = useRef<{
    showModal: (type: string, data?: string | TypeDeptListAPI) => void
  }>()

  return (
    <div>
      <div className={styles.deptList}>
        <div className={styles.deptListTitle}>
          <Form form={form} labelAlign='right'>
            <Form.Item name='deptName'>
              <div className={styles.deptListTitleInput}>
                <div>部门名称：</div>
                <Input style={{ width: 300 }} />
                <Button onClick={searchList} type='primary'>
                  搜索
                </Button>
                <Button onClick={resetList}>重置</Button>
                <Button onClick={addDeptList}>新增 </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
        <Table rowKey='_id' style={{ width: '100%' }} columns={columns} dataSource={data} />;
      </div>
      <CreateDept mref={refValue} getDeptListFn={getDeptListFn} deptList={deptList}></CreateDept>
    </div>
  )
}

export default DeptList
